<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        overflow: hidden;
      }

      .love {
        width: 450px;
        height: 450px;
        position: relative;
      }

      .love span {
        position: absolute;
        left: 0;
        color: goldenrod;
        font-size: 20px;
        font-family: sans-serif;
        text-shadow: 0 0 1em white;
        animation: x-move 10s ease-in-out infinite alternate,
          c-move 20s linear infinite;
        user-select: none;
      }

      .love span:first-child {
        color: orangered;
        font-size: 3em;
        text-shadow: 0 0 0.1em black, 0 0 1em white;
        z-index: 1;
      }

      @keyframes x-move {
        to {
          left: 450px;
        }
      }
      @keyframes c-move {
        0% {
          transform: translateY(0px);
        }
        100% {
          transform: translateY(5px);
        }
      }
      @keyframes y-move {
        0% {
          transform: translateY(180px);
        }
        10% {
          transform: translateY(45px);
        }
        15% {
          transform: translateY(5px);
        }
        18% {
          transform: translateY(0);
        }
        20% {
          transform: translateY(5px);
        }
        22% {
          transform: translateY(35px);
        }
        24% {
          transform: translateY(65px);
        }
        25% {
          transform: translateY(110px);
        }
        26% {
          transform: translateY(65px);
        }
        28% {
          transform: translateY(35px);
        }
        30% {
          transform: translateY(5px);
        }
        32% {
          transform: translateY(0);
        }
        35% {
          transform: translateY(5px);
        }
        40% {
          transform: translateY(45px);
        }
        50% {
          transform: translateY(180px);
        }
        71% {
          transform: translateY(430px);
        }
        72.5% {
          transform: translateY(440px);
        }
        75% {
          transform: translateY(450px);
        }
        77.5% {
          transform: translateY(440px);
        }
        79% {
          transform: translateY(430px);
        }
        100% {
          transform: translateY(180px);
        }
      }
    </style>
  </head>
  <body>
    <div class="love"></div>
    <script>
      const words = [
        "愛",
        "Love",
        "Amour",
        "Liebe",
        "Amore",
        "Amor",
        "Любовь",
        "الحب",
        "प्यार",
        "Cinta",
        "Αγάπη",
        "사랑",
        "Liefde",
        "Dashuri",
        "Каханне",
        "Ljubav",
        "Láska",
        "Armastus",
        "Mahal",
        "אהבה",
        "Szerelem",
        "Grá",
        "Mīlestība",
        "Meilė",
        "Любов",
        "Љубовта",
        "Cinta",
        "عشق",
        "Dragoste",
        "Láska",
        "Renmen",
        "ፍቅር",
        "munaña",
        "Sevgi",
        "Љубав",
        "karout",
        "amà",
        "amôr",
        "kærleiki",
        "mborayhu",
        "Upendo",
        "sòòyayyàà",
        "ljubav",
        "Սեր",
        "сүю",
        "сүйүү",
        "tia",
        "aroha",
        "KHAIR",
        "प्रेम",
        "kjærlighet",
        "munay",
        "jecel",
        "Kärlek",
        "soymek",
        "Mahal",
        "ярату",
        "محبت",
        "sopp",
        "uthando",
        "ความรัก",
        "Aşk",
        "Tình yêu",
        "ליבע",
      ];
      const dom = {
        love: document.querySelector(".love"),
      };

      dom.love.style.setProperty("--particles", words.length);
      const particles = words.length;
      words.forEach((word, i) => {
        let span = document.createElement("span");
        span.style.setProperty("--n", i + 1);
        span.style.animationDelay = (20 / particles) * (i + 1) * -1 + "s";
        span.innerText = word;
        dom.love.appendChild(span);
      });
    </script>
  </body>
</html>
